import React, { PureComponent } from 'react';
import { Grid, Flex, List } from 'antd-mobile';
import Img from '../../components/Img/Img';
import { new_goods } from './HomeNewGoodsBlock.less';
import { routerRedux } from 'dva/router';


class HomeNewGoodsBlock extends PureComponent {
  onClick = (el, index) => {
    this.props.dispatch(routerRedux.push({
          pathname: `/goodsDetail/${el.specId}`,
      }));
  }

  renderItem = (dataItem) => {
    return (
      <Flex direction="column" style={{ fontSize: '.24rem', height: '100%' }}>
        <div style={{ textAlign: 'center', fontSize: '.28rem', height: '0.5rem', lineHeight: '0.5rem', width: '80%' }} className="text-overflow-hidden">{dataItem.gcName}</div>
        <div style={{ height: '0.5rem', lineHeight: '0.5rem', width: '100%', color: '#808080' }}>
          <div style={{ padding: '0rem 0.15rem' }} className="text-overflow-hidden">{dataItem.goodsName}</div>
        </div>
        <Img src={dataItem.goodsImage} style={{ width: '2rem', height: '2rem' }} />
      </Flex>
    );
  }

  render() {
    const { data } = this.props;
    return (<List className={new_goods} renderHeader={() => <div><span className="title" /><span style={{ color: '#252525' }}>新品上市</span></div>}>
      <Grid
        data={data.slice(0, 6)}
        columnNum={3}
        onClick={this.onClick}
        renderItem={this.renderItem}
      />
            </List>);
  }
}

export default HomeNewGoodsBlock;
